<?xml version="1.0" encoding="UTF-8"?>
<!--
Copyright 2014 Christian Hildebrandt

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core" >

<body>
	<ui:composition>
		<!-- header logo: style can be found in header.less -->
		<header class="header"> <h:link outcome="/pages/Employee/timesheet.xhtml" styleClass="logo"> <!-- Add the class icon to your logo image or logo icon to add the margining -->
			Timera
		</h:link> <!-- Header Navbar: style can be found in header.less --> <nav class="navbar navbar-static-top" role="navigation"> <!-- Sidebar toggle button--> <a
			href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span>
			<span class="icon-bar"></span> <span class="icon-bar"></span>
		</a>
		<div class="navbar-right">
			<ul class="nav navbar-nav">
				<!-- Messages: style can be found in dropdown.less-->
<!-- 				<li class="dropdown messages-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-envelope"></i> <span -->
<!-- 						class="label label-success">4</span> -->
<!-- 				</a> -->
<!-- 					<ul class="dropdown-menu"> -->
<!-- 						<li class="header">You have 4 messages</li> -->
<!-- 						<li> -->
<!-- 							inner menu: contains the actual data -->
<!-- 							<ul class="menu"> -->
<!-- 								<li> -->
<!-- 									start message <a href="#"> -->
<!-- 										<div class="pull-left"> -->
<!-- 											<h:graphicImage library="img" name="avatar3.png" styleClass="img-circle" alt="User Image" /> -->
<!-- 										</div> -->
<!-- 										<h4> -->
<!-- 											Support Team <small><i class="fa fa-clock-o"></i> 5 mins</small> -->
<!-- 										</h4> -->
<!-- 										<p>Why not buy a new awesome theme?</p> -->
<!-- 								</a> -->
<!-- 								</li> -->
<!-- 								end message -->
<!-- 								<li><a href="#"> -->
<!-- 										<div class="pull-left"> -->
<!-- 											<h:graphicImage library="img" name="avatar2.png" styleClass="img-circle" alt="user image" /> -->
<!-- 										</div> -->
<!-- 										<h4> -->
<!-- 											AdminLTE Design Team <small><i class="fa fa-clock-o"></i> 2 hours</small> -->
<!-- 										</h4> -->
<!-- 										<p>Why not buy a new awesome theme?</p> -->
<!-- 								</a></li> -->
<!-- 								<li><a href="#"> -->
<!-- 										<div class="pull-left"> -->
<!-- 											<h:graphicImage library="img" name="avatar.png" styleClass="img-circle" alt="user image" /> -->
<!-- 										</div> -->
<!-- 										<h4> -->
<!-- 											Developers <small><i class="fa fa-clock-o"></i> Today</small> -->
<!-- 										</h4> -->
<!-- 										<p>Why not buy a new awesome theme?</p> -->
<!-- 								</a></li> -->
<!-- 								<li><a href="#"> -->
<!-- 										<div class="pull-left"> -->
<!-- 											<h:graphicImage library="img" name="avatar2.png" styleClass="img-circle" alt="user image" /> -->
<!-- 										</div> -->
<!-- 										<h4> -->
<!-- 											Sales Department <small><i class="fa fa-clock-o"></i> Yesterday</small> -->
<!-- 										</h4> -->
<!-- 										<p>Why not buy a new awesome theme?</p> -->
<!-- 								</a></li> -->
<!-- 								<li><a href="#"> -->
<!-- 										<div class="pull-left"> -->
<!-- 											<h:graphicImage library="img" name="avatar.png" styleClass="img-circle" alt="user image" /> -->
<!-- 										</div> -->
<!-- 										<h4> -->
<!-- 											Reviewers <small><i class="fa fa-clock-o"></i> 2 days</small> -->
<!-- 										</h4> -->
<!-- 										<p>Why not buy a new awesome theme?</p> -->
<!-- 								</a></li> -->
<!-- 							</ul> -->
<!-- 						</li> -->
<!-- 						<li class="footer"><a href="#">See All Messages</a></li> -->
<!-- 					</ul></li> -->
				<!-- Notifications: style can be found in dropdown.less -->
<!-- 				<li class="dropdown notifications-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-warning"></i> <span -->
<!-- 						class="label label-warning">10</span> -->
<!-- 				</a> -->
<!-- 					<ul class="dropdown-menu"> -->
<!-- 						<li class="header">You have 10 notifications</li> -->
<!-- 						<li> -->
<!-- 							inner menu: contains the actual data -->
<!-- 							<ul class="menu"> -->
<!-- 								<li><a href="#"> <i class="ion ion-ios7-people info"></i> 5 new members joined today -->
<!-- 								</a></li> -->
<!-- 								<li><a href="#"> <i class="fa fa-warning danger"></i> Very long description here that may not fit into the page and may cause design problems -->
<!-- 								</a></li> -->
<!-- 								<li><a href="#"> <i class="fa fa-users warning"></i> 5 new members joined -->
<!-- 								</a></li> -->

<!-- 								<li><a href="#"> <i class="ion ion-ios7-cart success"></i> 25 sales made -->
<!-- 								</a></li> -->
<!-- 								<li><a href="#"> <i class="ion ion-ios7-person danger"></i> You changed your username -->
<!-- 								</a></li> -->
<!-- 							</ul> -->
<!-- 						</li> -->
<!-- 						<li class="footer"><a href="#">View all</a></li> -->
<!-- 					</ul></li> -->
				<!-- Tasks: style can be found in dropdown.less -->
<!-- 				<li class="dropdown tasks-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="fa fa-tasks"></i> <span -->
<!-- 						class="label label-danger">9</span> -->
<!-- 				</a> -->
<!-- 					<ul class="dropdown-menu"> -->
<!-- 						<li class="header">You have 9 tasks</li> -->
<!-- 						<li> -->
<!-- 							inner menu: contains the actual data -->
<!-- 							<ul class="menu"> -->
<!-- 								<li> -->
<!-- 									Task item <a href="#"> -->
<!-- 										<h3> -->
<!-- 											Design some buttons <small class="pull-right">20%</small> -->
<!-- 										</h3> -->
<!-- 										<div class="progress xs"> -->
<!-- 											<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> -->
<!-- 												<span class="sr-only">20% Complete</span> -->
<!-- 											</div> -->
<!-- 										</div> -->
<!-- 								</a> -->
<!-- 								</li> -->
<!-- 								end task item -->
<!-- 								<li> -->
<!-- 									Task item <a href="#"> -->
<!-- 										<h3> -->
<!-- 											Create a nice theme <small class="pull-right">40%</small> -->
<!-- 										</h3> -->
<!-- 										<div class="progress xs"> -->
<!-- 											<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> -->
<!-- 												<span class="sr-only">40% Complete</span> -->
<!-- 											</div> -->
<!-- 										</div> -->
<!-- 								</a> -->
<!-- 								</li> -->
<!-- 								end task item -->
<!-- 								<li> -->
<!-- 									Task item <a href="#"> -->
<!-- 										<h3> -->
<!-- 											Some task I need to do <small class="pull-right">60%</small> -->
<!-- 										</h3> -->
<!-- 										<div class="progress xs"> -->
<!-- 											<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> -->
<!-- 												<span class="sr-only">60% Complete</span> -->
<!-- 											</div> -->
<!-- 										</div> -->
<!-- 								</a> -->
<!-- 								</li> -->
<!-- 								end task item -->
<!-- 								<li> -->
<!-- 									Task item <a href="#"> -->
<!-- 										<h3> -->
<!-- 											Make beautiful transitions <small class="pull-right">80%</small> -->
<!-- 										</h3> -->
<!-- 										<div class="progress xs"> -->
<!-- 											<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"> -->
<!-- 												<span class="sr-only">80% Complete</span> -->
<!-- 											</div> -->
<!-- 										</div> -->
<!-- 								</a> -->
<!-- 								</li> -->
<!-- 								end task item -->
<!-- 							</ul> -->
<!-- 						</li> -->
<!-- 						<li class="footer"><a href="#">View all tasks</a></li> -->
<!-- 					</ul></li> -->
				<!-- User Account: style can be found in dropdown.less -->
				<li class="dropdown user user-menu"><a href="#" class="dropdown-toggle" data-toggle="dropdown"> <i class="glyphicon glyphicon-user"></i> 
				<span><h:outputText value="#{loginBean.logggedInUser.firstName}" /><h:outputText value="#{loginBean.logggedInUser.lastName}" />
					<i class="caret"></i>
				</span>
				</a>
					<ul class="dropdown-menu">
						<!-- User image -->
						<li class="user-header bg-light-blue"><h:graphicImage library="img" name="#{loginBean.logggedInUser.avatarImage}" styleClass="img-circle" alt="User Image" />
							<p>
								<h:outputText value="#{loginBean.logggedInUser.firstName} #{loginBean.logggedInUser.lastName}" /> - Web Developer <small>Member since Nov. 2012</small>
							</p></li>
						<!-- Menu Body -->
						<li class="user-body">
							<div class="col-xs-4 text-center">
								<a href="#">Followers</a>
							</div>
							<div class="col-xs-4 text-center">
								<a href="#">Sales</a>
							</div>
							<div class="col-xs-4 text-center">
								<a href="#">Friends</a>
							</div>
						</li>
						<!-- Menu Footer-->

						<li class="user-footer">
							<div class="pull-left">
								<a href="#" class="btn btn-default btn-flat">Profile</a>
							</div>
							<div class="pull-right">
								<h:form>
									<h:commandLink action="#{loginBean.logout()}" value="Sign out" styleClass="btn btn-default btn-flat" />
								</h:form>
							</div>
						</li>

					</ul></li>
			</ul>
		</div>
		</nav> </header>
	</ui:composition>
</body>
</html>
